<template>
<div>
 <Headss>
 <i @click='prev'></i>  
 <span> 面部护理</span>
 </Headss>
      
    
<!-- 导航 -->
    <div class="c-bjs">      
      <div class="c-Nav">
        <span>销量</span>
        <span>最新</span>
        <span>价格<img class="c-jg" src="../../assets/user/小箭头.png" alt=""></span>
        <span  @click="drawer = true">筛选</span>
      </div>
<!-- 商品 -->
      <div class="c-shop">
       <img class="c-cunc1" src="../../assets/user/chuncai.png" alt="">
            <span class="c-biaoti">焕彩萃璨花蕊唇彩4.8g</span>
            <span class="c-jieshao">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span>
           <span class="c-hwzy">
              <img class="c-rb" src="../../assets/user/riben.png" alt="">
              <img class="c-fj" src="../../assets/user/feiji.png" alt="">
              海外直邮 <span class="c-hyzy-qian">¥166.06</span></span>
          
      </div>
       <div class="c-shop">
        
       <img class="c-cunc2" src="../../assets/user/chuncai.png" alt="">
            <span class="c-biaoti">焕彩萃璨花蕊唇彩4.8g</span>
            <span class="c-jieshao">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span>
           <span class="c-hwzy">
              <img class="c-rb" src="../../assets/user/riben.png" alt="">
              <img class="c-fj" src="../../assets/user/feiji.png" alt="">
              海外直邮 <span class="c-hyzy-qian">¥166.06</span></span>
          
      </div>
       <div class="c-shop">
        
       <img class="c-cunc3" src="../../assets/user/chuncai.png" alt="">
            <span class="c-biaoti">焕彩萃璨花蕊唇彩4.8g</span>
            <span class="c-jieshao">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span>
           <span class="c-hwzy">
              <img class="c-rb" src="../../assets/user/riben.png" alt="">
              <img class="c-fj" src="../../assets/user/feiji.png" alt="">
              海外直邮 <span class="c-hyzy-qian">¥166.06</span></span>
      </div>
       <div class="c-shop">
        
       <img class="c-cunc4" src="../../assets/user/chuncai.png" alt="">
            <span class="c-biaoti">焕彩萃璨花蕊唇彩4.8g</span>
            <span class="c-jieshao">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span>
           <span class="c-hwzy">
              <img class="c-rb" src="../../assets/user/riben.png" alt="">
              <img class="c-fj" src="../../assets/user/feiji.png" alt="">
              海外直邮 <span class="c-hyzy-qian">¥166.06</span></span>
      </div>
      <div><img class="c-lunbotu" src="../../assets/user/轮播图.png" alt="">
      <div class="c-jzgd">加载更多</div>
      </div>
    </div>
  <el-drawer
  title=""
  :visible.sync="drawer"
  :with-header="false"
  :size="size"
  :before-close="handleClose">
  <div class="c-screen">
<div class="c-top">
<img  @click='prev' class="c-sximg" src="../../assets/user/sx-jt.png" alt="">
<span class="c-fl">
  分类
</span>
<span class="c-qd"> 
确定
</span>
</div>
<div>
   <ul class="c-me1" >
            <li @click="click(index)"  
            class="c-op1" 
            v-for="(item,index) in list1" 
            :key="item.id" >
               <div 
               :class="{'c-bor1':arr1[index]}">
               {{item.name}} 
                 <i
                 :class="{'c-dh':arr1[index]}"  
                 ></i>
                </div> 
                </li>
                </ul>
</div>
 </div>
</el-drawer>
</div>
</template>
<script>
import Heads from '../users/components/Head.vue'

export default {
    name:'Facialcare',
    data() {
      return {
        drawer: false,
        size: '56rem',
        ins:'',
         list1:[
                {id:1,name:'洁面护理'},
                {id:2,name:'人气口红'},
                {id:3,name:'名牌包包'},
                {id:4,name:'洁面护理'},
                {id:5,name:'人气口红'},
                {id:6,name:'名牌包包'},
                {id:7,name:'洁面护理'},
                {id:8,name:'人气口红'},
                {id:9,name:'名牌包包'},
                {id:10,name:'洁面护理'},
                {id:11,name:'人气口红'},
                {id:12,name:'名牌包包'},
                {id:13,name:'洁面护理'},
                {id:14,name:'人气口红'},
                {id:15,name:'名牌包包'},
                {id:16,name:'洁面护理'},
                {id:17,name:'人气口红'},
                {id:18,name:'名牌包包'},
                {id:19,name:'洁面护理'}
            ],
            arr1:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],
      };
    },
    components:{
       'Headss':Heads
    },
    methods: {
       handleClose(done) {
            done();
      },
       click(e){
         this.ins=e;
        for(var i=0;i<this.arr1.length;i++){
            this.arr1[i] = false;
            
        }
        this.$set(this.arr1,e,true);
         },

      prev:function(){
      this.$router.replace('/category')
      },
    
    },
}
</script>
<style scoped>
    .Stop {
    background-color: #e53e42;
    width: 100%;
    height: 9.6rem;
    color: #fff;
    font-size: 3.6rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .StopO {
    height:9.6rem;
    padding: 0 2rem;
    line-height: 9.6rem;
     text-align: center;
  }
  .StopOn{
      width: 2.2rem;
      height: 3.8rem;
      position: fixed;
    top: 3rem;
    left: 2.9rem;
  }
  /* 导航 */
  .c-bjs{
    background-color: #f2f2f2;
    margin-top:9.6rem ;
  }
  .c-Nav{
height: 8rem;
width: 100%;
font-size: 2.8rem;
color: #4f4f4f;
font-size:2.8rem;
line-height: 8rem;
display: flex;
justify-content:space-around;
  }
.c-jg{
width: 0.8rem;
height:1.7rem;
padding-left:1.7rem ;
}
/* 商品 */
.c-shop{
  height: 20rem;
  width: 100%;
  background-color: #fff;
  border-bottom: 0.1rem #cccccc solid;
  margin-bottom:1.9rem;
}
.c-cunc1{
width: 6.9rem;
height: 15.3rem;
/* border: 1px #f00 solid; */
position: absolute;
top: 20rem;
left: 7.6rem;
}
.c-cunc2{
width: 6.9rem;
height: 15.3rem;
/* border: 1px #f00 solid; */
position: absolute;
top: 42rem;
left: 7.6rem;
}
.c-cunc3{
width: 6.9rem;
height: 15.3rem;
/* border: 1px #f00 solid; */
position: absolute;
top: 64rem;
left: 7.6rem;
}
.c-cunc4{
width: 6.9rem;
height: 15.3rem;
/* border: 1px #f00 solid; */
position: absolute;
top: 86rem;
left: 7.6rem;
}
.c-biaoti{
display: block;
font-size: 3rem;
color:#333333;
margin-left:22rem;
padding-top:2rem;
/* border: 0.1rem #f00 solid; */
}
.c-jieshao{
display: block;
font-size: 2.4rem;
height: 5.9rem;
line-height: 3.5rem;
color:#4d4d4d;
margin-left:22rem;
padding-top:1rem ;
/* border: 0.1rem #f00 solid; */
}
.c-rb{
width: 3rem;
height: 2rem;
margin-left:22rem;
}
.c-fj{
width: 3.4rem;
height: 3.3rem;
padding-left:1.9rem; 
padding-right: 0.8rem;
vertical-align: middle;
}
.c-hwzy{
  display: inline-block;
  font-size: 2.4rem;
  height: 2.4rem;
  vertical-align: middle;
  color: #333333;
  margin-top:1.4rem ;
  
}
.c-hyzy-qian{
  vertical-align: middle;
  color: #e53e42;
  font-size: 3rem;
  margin-left:17rem ;
}
.c-lunbotu{
  width: 100%;
  height: 30.1rem;
}
.c-jzgd{
  height:7.3rem;
  width: 100%;
  font-size: 2.4rem;
  line-height: 7.3rem;
  text-align: center;
  color: #808080;
}
/*  */
 .c-top{
    height: 9.6rem;
    /* border: 1px #f00 solid; */
    background-color: #f2f2f2;
   font-size: 3.6rem; 
   display: flex;
    justify-content:space-between;
  }
  .c-sximg{
    width: 2.2rem;
    height: 3.8rem;
    padding-top:2.9rem;
       padding-left:2.7rem ;
  }
  .c-fl{
   /* display:block; */
   font-size: 3.6rem;
   line-height: 9.6rem;
  }
  .c-qd{
    font-size: 3rem;
    padding-right:1.9rem ;
    line-height: 9.6rem;
  }
  /* 导航 */
.c-me1{
list-style: none;
width: 52rem;
margin-left:2rem;
/* border-right: 0.1rem #cccccc solid; */
}
.c-op1{
  text-align: left;
    height: 6rem;
    font-size: 2.6rem;
    line-height: 6rem;
    color: #4d4d4d;
    border-bottom:0.1rem #cccccc solid;
    position: relative;
}
.c-bor1{
    color: #e53e42;
}
.c-dh{
  position: absolute;
  right: 0;
  top: 2rem;
  display: inline-block;
  background:url('../../assets/user/duihao.png') no-repeat;
width: 2.4rem;
height: 2.4rem;
vertical-align: middle;
}

</style>